<template>
    <div class="footer-view">
        <img class="line-img" src="/images/afooter/fbg.png" alt=""/>
        <router-link to="" class="item">
        <img src="/images/afooter/f0.png" alt=""/>
    </router-link>
        <router-link :to="dt.to" v-for="dt in lists" :key="dt.to" class="item">
        <img :src="'/images/afooter/'+dt.img" alt=""/>
        <div> {{dt.name}}</div>
    </router-link>
</div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
export default {
    components:{
       
    },
    props:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
         const {t} = useI18n()

        const state = reactive({
            index:1,
            lists:[
                {to:'/global-ad-space',name:t('advertiser.footer1'),img:'f1.png'},
                {to:'/ad/release',name:t('advertiser.footer2'),img:'f2.png'},
                // {to:'/ad/customer',name:'CM',img:'f3.png'},
                // {to:'/',name:'TASKS',img:'f4.png'},
                {to:'/ad/fundManage',name:t('advertiser.footer3'),img:'f5.png'},
                {to:'/ad/analysis',name:t('advertiser.footer4'),img:'f6.png'},
                {to:'/ad/ranking',name:t('advertiser.footer5'),img:'f7.png'}
            ]
        })
        onMounted(()=>{
            // console.log("UUUUU:",route.path)
            // state.index = route.path
        })
        const setIndex = (to)=>{
        //     if(state.index == to) return
        //     state.index = to
        //    // context.emit("change",index)
        //    router.push(to)
        }

        return{
            ...toRefs(state),
            setIndex
        }
    }
}
</script>

<style lang="scss" scoped>

    .footer-view{
            height:15%;
            position: fixed;
            bottom:0;
            width:100%;
            z-index:9999;
            display: flex;
            justify-content: flex-end;
            background-image: url(/images/afooter/fbg1.png);
            background-repeat: no-repeat;
            background-position: right;
            left:50%;
            margin-left:-50%;
            .line-img{
                position: absolute;
                right:0;
                height:8px;
                top:-5px;
            }
            .item{
                text-align: center;
                align-self: center;
                align-items: center;
                margin-left:20px;
                div{
                    color:#fff;
                    font-size:12px;
                }
                img{
                    height:60px;
                    vertical-align: middle;
                }
            }
            .item:last-child{
                padding-right:40px;
            }
        }
</style>